<template>
  <div class="app-container">
    <div id="message-box" class="message-list">
      <el-button v-if="!showHistory" id="btn-more" type="info" round style="align-self: center;padding: 5px" @click="getHistory">查看历史</el-button>
      <div v-for="(item, index) in history" :id="'dialog' + index" :key="index" class="message-item" :style="{'align-self': (item.senderId !== id ? 'flex-start':'flex-end') }">
        <el-avatar v-if="item.senderId !== id" :size="70" :src="item.avatar" />
        <div class="message-item-content">
          <div class="message-item-user" :style="{'align-self': (item.senderId !== id ? 'flex-start':'flex-end') }">
            {{ item.sender }}
          </div>
          <div :class="'dialog-box-' + (item.senderId === id ? 'right':'left')">
            <div v-html="item.content" />
            <div v-if="item.type !== 'dialog'" class="btn-bar">
              <el-button type="primary">同意</el-button>
              <el-button type="danger">拒绝</el-button>
            </div>
          </div>
        </div>
        <el-avatar v-if="item.senderId === id" :size="70" :src="item.avatar" />
      </div>
    </div>
    <el-form class="input-box">
      <el-form-item>
        <el-input v-model="form.content" :autosize="{ minRows: 8, maxRows: 8}" class="textarea" type="textarea" />
      </el-form-item>
      <el-form-item class="btn-bar">
        <el-button type="primary" @click="sendMsg">发送</el-button>
        <el-button>撤销</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { fetchOrgInfo } from '@/api/com'
import { Message } from 'element-ui'
export default {
  name: 'P2G',
  data() {
    return {
      showHistory: false,
      scrollListener: null,
      otherInfo: {
        avatar: '',
        name: '',
        id: 3
      },
      id: 2,
      form: {
        content: '',
        senderId: 2,
        type: 'dialog', sender: 'Sakana',
        reciver: -1,
        avatar: ''
      },
      name: '肥宅俱乐部',
      history: [
        // { senderId: 1, type:'dialog', sender: 'Sakana', content: '《美少女战士》是一部由东映动画制作的魔法少女变身类动画片，该片由佐藤顺一、几原邦彦等导演，富田佑弘、榎户洋司等编剧 [1] ，该剧集于1992年3月7日在日本首播，由东映动画制作发行 [2] 。', avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png' }
      ],
      memberDetail: {
        id: '@increment',
        gender: '@Gender_ch',
        name: '@first',
        password: '@string',
        class: '@Major' + '@string(number,3)',
        org: '@Org',
        position: '@Position',
        status: 'Status',
        img: ''
      },
      editData: {},
      categoryList: [
        { value: '0', label: '禁用' },
        { value: '1', label: '启用' }
      ],
      memberMap: [
        { key: 'id', title: '学号' },
        { key: 'name', title: '姓名' },
        { key: 'gender', title: '性别' },
        { key: 'password', title: '密码' },
        { key: 'class', title: '班级' },
        { key: 'org', title: '社团' },
        { key: 'position', title: '职位' },
        { key: 'status', title: '状态' }
      ]
    }
  },
  created() {
    const you = { senderId: 2, type: 'dialog', sender: 'Catcher', content: '<span style="color:red">利用vue添加了插入一个span 元素</span>', avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png' }
    const other = { senderId: 1, type: 'dialog', sender: 'Sakana', content: '<div>《美少女战士》是一部由东映动画制作的魔法少女变身类动画片，该片由佐藤顺一、几原邦彦等导演，富田佑弘、榎户洋司等编剧 [1] ，该剧集于1992年3月7日在日本首播，由东映动画制作发行 [2] 。</div>', avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png' }
    const request = { senderId: 1, type: 'request', sender: 'Sakana', content: '将Sakana的用户名修改为SakanaCatcher', avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png' }
    for (var i = 0; i < 10; i++) {
      this.history.push(other)
      this.history.push(you)
      this.history.push(request)
    }
    this.fetchInfo()
    Message({
      message: '广播通知将会发送给所有广播组成员',
      type: 'info',
      duration: 2000
    })
  },
  methods: {
    getElementTop(element) {
      var actualTop = element.offsetTop
      var current = element.offsetParent
      while (current !== null) {
        actualTop += current.offsetTop
        current = current.offsetParent
      }
      return actualTop
    },
    scrollTo(id, offset) {
      const element = document.getElementById(id)
      var actualTop = element.offsetTop
      var current = element.offsetParent
      var elementScrollTop = null
      while (current !== null) {
        actualTop += current.offsetTop
        current = current.offsetParent
      }
      if (document.compatMode === 'BackCompat') {
        elementScrollTop = document.body.scrollTop
      } else {
        elementScrollTop = document.documentElement.scrollTop
      }
      document.getElementById('message-box').scrollTo(0, actualTop - elementScrollTop + offset)
    },
    getHistory() {
      const messageBox = document.getElementById('message-box')
      const you = { senderId: 2, type: 'dialog', sender: 'Catcher', content: '<p>《美少女战士》是一部由东映动画制作的魔法少女变身类动画片，该片由佐藤顺一、几原邦彦等导演，富田佑弘、榎户洋司等编剧 [1] ，该剧集于1992年3月7日在日本首播，由东映动画制作发行 [2] 。</p>', avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png' }
      const other = { senderId: 1, type: 'dialog', sender: 'Sakana', content: '<html><body><p>《美少女战士》是一部由东映动画制作的魔法少女变身类动画片，该片由佐藤顺一、几原邦彦等导演，富田佑弘、榎户洋司等编剧 [1] ，该剧集于1992年3月7日在日本首播，由东映动画制作发行 [2] 。</p></body></html>', avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png' }
      for (var i = 0; i < 2; i++) {
        this.history.unshift(other)
        this.history.unshift(you)
      }
      if (this.showHistory === false) {
        messageBox.addEventListener('scroll', () => {
          if (messageBox.scrollTop <= 0) {
            this.getHistory()
          }
        })
        this.showHistory = true
        this.scrollTo('dialog3', -40)
      } else {
        this.scrollTo('dialog3', 0)
      }
    },
    sendMsg() {
      var msg = Object.assign({}, this.form)
      this.history.push(msg)
      const msgBox = document.getElementById('message-box')
      setTimeout(
        () => {
          msgBox.scrollTo({
            top: msgBox.scrollHeight,
            behavior: 'smooth'
          })
        }, 200
      )

      // this.scrollTo('dialog'+ (this.history.length - 1))
    },
    setTagsViewTitle(name) {
      this.$route.meta.title = name + '-通知'
      const currentView = this.$store.getters.visitedViews[this.$store.getters.visitedViews.findIndex(
        (item) => item.path === this.$route.path
      )]
      if (currentView != null) {
        currentView.title = name + '-通知'
      }
      // this.$store.getters.breadcrumb.getBreadcrumb()
      // const route = Object.assign({}, this.tempRoute, { title: `${this.name}`})
      // this.$store.dispatch('tagsView/updateVisitedView', route)
    },
    setPageTitle(name) {
      document.title = `${name}` + '-通知'
    },
    fetchInfo() {
      const id = this.$route.params && this.$route.params.id
      fetchOrgInfo(id).then(
        res => {
          this.otherInfo = res.data.items
          this.setPageTitle(this.otherInfo.name)
          this.setTagsViewTitle(this.otherInfo.name)
        }
      )
    },
    toEditMode() {
      this.isEditMode = true
      this.editData = this.memberDetail
      // this.getCategoryList()
    },
    destroyDialog() {
      this.editData = {}
      this.isEditMode = false
    }
  }
}
</script>

<style scoped lang="scss">
$triangle-size: 10px;
$triangle-width: 4px;
.app-container{
  height: calc(100vh - 90px);
  padding: 0 5px;
  display: flex;
  flex-direction: column;
}
.dialog-box-left {
  left: 10px;
  min-height: 50px;
  max-width: 500px;
  position: relative;
  background: #88b7d5;
  border: 4px solid #c2e1f5;
  border-radius: 20px;
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  .btn-bar{
    margin-top: 20px;
    align-self: flex-end;
  }
}
.dialog-box-left:after, .dialog-box-left:before {
  right: 100%;
  top: 20px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.dialog-box-left:after {
  border-color: rgba(136, 183, 213, 0);
  border-right-color: #88b7d5;
  border-width:$triangle-size - $triangle-width;
  margin-top:-$triangle-size + $triangle-width;
}
.dialog-box-left:before {
  border-color: rgba(194, 225, 245, 0);
  border-right-color: #c2e1f5;
  border-width: $triangle-size;
  margin-top: -$triangle-size;
}
.dialog-box-right {
  min-height: 50px;
  max-width: 500px;
  position: relative;
  background: #45eab3;
  border: 4px solid #7dfcd6;
  border-radius: 20px;
  padding: 10px 15px;
  margin-right: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  .btn-bar{
    margin-top: 20px;
    align-self: flex-end;
  }
}
.dialog-box-right:after, .dialog-box-right:before {
  left: 100%;
  top: 20px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.dialog-box-right:after {
  border-color: rgba(136, 183, 213, 0);
  border-left-color:  #45eab3;
  border-width:$triangle-size - $triangle-width;
  margin-top:-$triangle-size + $triangle-width;
}
.dialog-box-right:before {
  border-color: rgba(194, 225, 245, 0);
  border-left-color: #7dfcd6;
  border-width: $triangle-size;
  margin-top: -$triangle-size;
}
.message-list{
  display: flex;
  flex-direction: column;
  height: 70vh;
  overflow: auto;
  padding: 20px;
  min-height: 80px;
  top: 40px;
  box-shadow: 0 3px 6px #888888;
  .message-item{
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    .message-item-content{
      display: flex;
      flex-direction: column;
      .message-item-user{

      }
    }
  }
}
.input-box{
  display: flex;
  flex-direction: column;
  margin-top: 5px;
  .textarea{
    font-size: 18px;
  }
  .btn-bar{
    position: absolute;
    bottom: 20px;
    right: 30px;
    align-self: flex-end;
  }
}
</style>
